<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app" >
    <form id="add" method="post">
        ID：<input type="text" name="username"><br>
        password：<input type="text" name="password"><br>
        <input type="submit" value="新增" onclick="this.add()">
    </form>
    <table border="1px">
        <tr>
        <td>ID</td>
        <td>USERNAME</td>
        <td>PASSWORD</td>
        <td colspan="2">edit</td>
        </tr>
        <tr v-for="item in datalist">
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
            <td>{{item.password}}</td>
            <td>update</td>
            <td>edit</td>

        </tr>
    </table>
</div>
</body>
<script>
        var vm = new Vue({
            el:'#app',
            data:{
                datalist:[],
                FormData:{}
            },
            created(){
                this.getAll()
            },
            methods:{
                getAll(){
                    axios.get("users/queryAll").then((res)=>{
                        this.datalist = res.data
                        console.log(this.datalist);
                    });
                },
                add(){
                    let form = document.getElementById("add");
                    this.formData = new FormData(form);
                    console.log(this.formData)
                    axios.post("users/create",this.formData).then(res=>{
                        console.log("sucess");
                    }).finally(
                        this.created()
                    )


                }
            }

        })
</script>
</html>